<template>
  <view class="reply">
    <view class="top">
      <comment-item :closeBtn="true" :childState="true" :item="replyItem"></comment-item>
    </view>
    <view class="list">
      <view class="row" v-for="item in childReplyArr">
        <comment-item @removeEnv="commentEnv" :childState="true" :item="item"></comment-item>
      </view>
    </view>

    <view>
      <comment-frame @commentEnv="commentEnv" :commentObj="commentObj" :placeholder="`回复：${replyItem.user_id[0].username}`"></comment-frame>
    </view>

  </view>
</template>


<script>
const db = uniCloud.database();
export default {
  data() {
    return {
      replyItem: null,
      commentObj: {
        article_id: "",
        comment_type: 1,
        reply_user_id: "",
        reply_comment_id: ""
      },
      childReplyArr: []
    };
  },
  onLoad(e) {
    let replyItem = uni.getStorageSync("replyItem");
    if (!replyItem) return uni.navigateBack();
    this.replyItem = replyItem || {};
    this.commentObj.article_id = this.replyItem.article_id;
    this.commentObj.reply_user_id = this.replyItem.user_id[0]._id;
    this.commentObj.reply_comment_id = this.replyItem._id;
    this.getComment();
  },
  onUnload() {
    uni.removeStorageSync("replyItem");
  },
  methods: {
    //评论成功后的回调
    commentEnv() {
      this.childReplyArr = [];
      this.getComment();
    },

    //获取子集评论列表
    getComment() {
      let commentTemp = db
        .collection("quanzi_comment")
        .where(
          `article_id == "${this.replyItem.article_id}" && comment_type==1 && 
reply_comment_id == "${this.replyItem._id}"`
        )
        .orderBy("comment_date desc")
        .limit(10)
        .getTemp();
      let userTemp = db
        .collection("uni-id-users")
        .field("_id,username,nickname,avatar_file")
        .getTemp();

      db.collection(commentTemp, userTemp)
        .get()
        .then(res => {
          console.log(res);
          this.childReplyArr = res.result.data;
        });
    }
  }
};
</script>

<style lang="scss">
.reply {
  .top {
    padding: 30rpx;
    border-bottom: 15rpx solid #eee;
  }
  .list {
    padding: 30rpx;
    padding-bottom: 120rpx;
    .row {
      padding-bottom: 15rpx;
    }
  }
}
</style>
